<html>

<body style="text-align: center">
    <div>
        <canvas id="drawingCanvas" width="500" height="1000" style="background-color: #000000; "></canvas>
    </div>
    <script src="http://assets.dwstatic.com/common/lib/??jszip/3.1.3/jszip.min.js,jszip/3.1.3/jszip-utils.min.js" charset="utf-8"></script>
    <script src="../build/svga.min.js"></script>
    <script>
        var parser = new SVGA.Parser()
        var player = new SVGA.Player()
        parser.load("./samples/rose.svga", function (videoItem) {
            player.setVideoItem(videoItem);
            player.startAnimation()
        })
        const requestFrame = () => {
            requestAnimationFrame(() => {
                const ctx = document.getElementById('drawingCanvas').getContext('2d');
                ctx.clearRect(0, 0, 500, 1000);
                ctx.fillStyle = "#e2e2e2"
                ctx.fillRect(0, 0, 500, 1000);
                player.drawOnContext(ctx, 100, 100, 250, 250);
                requestFrame()
            })
        }

        requestFrame();

    </script>
</body>

</html>